<template>
    <div>
        <div class="header">
            <div class="header-left">
                <ul class="nav">
                    <li><a href="">link_01</a></li>
                    <li><a href="">link_02</a></li>
                    <li><a href="">link_03</a></li>
                    <li><a href="">link_04</a></li>
                    <li><a href="">link_05</a></li>
                    <li><a href="">link_06</a></li>
                </ul>
            </div>
            <div class="header-right">
                <div class="searchBar">
                    <input type="text" class="searchCon">
                    <a href="" class="searchBtn"></a>
                </div>
            </div>
        </div>
        <div id="box"></div>
    </div>


</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" >
    /* 
        安装sass  sass-loader   

        sass css拓展语言 => sass script => 将scss编译为css

        有两套语法
        sass  老版本
        scss  新版本  
    
    */


    // 注释
    /* 普通注释: 会保存到编译后的文件  */
    // 静默注释: 只保留在SASS源文件中，编译后被省略。  

    // 变量
    // 1. 把sass变量作为css属性的属性值 
    // 2. 把sass变量css拼接到 css选择器名/属性名/属性值中  => 插值语句 #{xxx}

    @use "sass:math";  //使用sass中的math模块

    $hot:#e33333;
    $warm:#FFCCCC;
    $cold:#99CC99;
    $grey:#CCCCCC;

    $side:left;

    body{
        font: 14px/20px "微软雅黑";
    }


    // 1. 一般情况下，sass在解开一个嵌套规则时就会把父选择器（.header）通过一个空格连接到子选择器的前边（.header-left）形成（.header .header-left）。这种在CSS里边被称为后代选择器
    // 2. 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
    .header{
        width: 1226px;
        height: 40px;
        background:$grey;   // 把sass变量作为属性值  (直接作为值)
        border-#{$side}:1px solid $warm;
        overflow: hidden;

        // .header .header-left
        .header-left{   
            float:left;

            .nav{
                text-align: center;

                li{
                    float: left;
                    padding:0 20px;
                    line-height: 40px;

                    // &会被直接替换为 父选择器 
                    // .header .header-left .nav li  替换 & 
                    // .header .header-left .nav li:hover 
                    &:hover{
                        background:$warm;
                        color: #fff;
                    }

                }
            }


        }

        .header-right{
            float:right;

            .searchBar{
                border: 1px solid #333 ;
                margin-right: 20px;
                margin-top: 4px;
                height: 32px;

                .searchCon{
                    height: 32px;
                    width: 200px;
                    border:0;
                    padding: 0;
                    outline: none;
                    box-sizing: border-box;
                    float: left;
                }
                .searchBtn{
                    width: 32px;
                    height: 32px;
                    background-color:$grey;
                    float: right;
                }
            }
        }
    }


    /* scss计算
        加法: a. 两个有相同的单位 b.一个有单位,一个没有单位 
        减法: a. 两个有相同的单位 b.一个有单位,一个没有单位 
        乘法: 一个有单位,一个没有单位   20px*2 => 40px   20px*20px=>400px*px(错误)
        除法: a. 两个有相同的单位,单位会舍去 =>倍数  => 200px / 2px =>  100
              b. 一个有单位,一个没有单位    200px / 2  => 100px
    
    */
    #box{
        width: 200px + 40px;
        width: 200px + 40;
        width: 200px - 40px;
        width: 200px - 40;
        height: 200px*2;
        // height: 200px*2px;   错误写法 => 400px*px
        height: math.div(200px ,2px);  
        height:calc( 200px / 2);
        padding: 20px;
        background-color: $cold;
    }








</style>   